<template>
    <div class="log-menu-open" v-if="!show" @click="show = !show">
        <div class="title-font">{{$t('components.report.63cwn5tllho0')}}</div>
    </div>
    <div class="log-menu" v-else>
        <div class="title">
            <div class="title-font">{{$t('components.report.63cwn5tllho0')}}</div>
            <div>{{$t('components.report.63cwn5tlmq80')}}:<span class="sum">{{ form.list.length }}</span></div>
            <div class="delete"><icon-close @click="show = !show" /></div>
        </div>
        <div class="log-table wrap">
            <div class="log-table-title">
                <div class="uav-num">{{ $t('components.civilUse.63613yl13n00') }}</div>
                <div class="name">{{$t('components.report.63cwn5tlmuo0')}}</div>
                <div class="tel">{{$t('components.report.63cwn5tlmx40')}}</div>
                <div class="info">{{$t('components.report.63cwn5tlmz40')}}</div>
                <div class="location">{{$t('components.report.63cwn5tln180')}}</div>
            </div>
            <ul class="info-list-scroll">
                <li v-for="(item, index) in (form.list as any)" :key="index">
                    <a-popover
                        :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                        <div class="uav-num text-ellipsis" style="width: 88px; text-align: center;color: #2EE7FF;">
                            <span class="uav-num text-ellipsis">{{ item.license ? item.license : $t('components.report.63cwn5tln3c0') }}</span>
                        </div>
                        <template #content>
                            <div class="operate-demo">
                                <p style="color: #fff;"><span>{{ item.license ? item.license : $t('components.report.63cwn5tln3c0') }}</span></p>
                            </div>
                        </template>
                    </a-popover>
                    <div class="name">{{ item.personName ? item.personName : $t('components.report.63cwn5tln6o0') }}</div>
                    <a-popover
                        :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                        <div class="tel text-ellipsis" style="width: 88px; text-align: center;">
                            <span class="tel text-ellipsis">{{ item.phone ? item.phone : $t('components.report.63cwn5tln6o0') }}</span>
                        </div>
                        <template #content>
                            <div class="operate-demo">
                                <p style="color: #fff;"><span>{{ item.phone ? item.phone : $t('components.report.63cwn5tln6o0') }}</span></p>
                            </div>
                        </template>
                    </a-popover>
                    <a-popover
                        :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                        <div class="info text-ellipsis" style="width: 120px; text-align: center;">
                            <span class="info text-ellipsis">{{ item.startTime ? dayjs.unix(item.startTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span>
                        </div>
                        <template #content>
                            <div class="operate-demo">
                                <p style="color: #fff;"><span>{{ item.startTime ? dayjs.unix(item.startTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span></p>
                            </div>
                        </template>
                    </a-popover>
                    <a-popover
                        :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                        <div class="location text-ellipsis" style="width: 120px; text-align: center;">
                            <span class="location text-ellipsis">{{ item.address ? item.address : $t('components.report.63cwn5tln6o0') }}</span>
                        </div>
                        <template #content>
                            <div class="operate-demo">
                                <p style="color: #fff;"><span>{{ item.address ? item.address : $t('components.report.63cwn5tln6o0') }}</span></p>
                            </div>
                        </template>
                    </a-popover>
                </li>
                <cIndexNone v-if="!form.list?.length"></cIndexNone>
            </ul>
            <div class="pagination" v-if="form.count">
                <a-pagination :total="form.count"  v-model:current="form.data.page" :page-size="form.data.pageSize" @change="getData" simple/>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { apiReportList } from '@/api/visual'
const local = useLocal()
// const router = useRouter()
import dayjs from 'dayjs'
const show = ref(true)
const form = reactive({
    data: {
        page: 1,
        pageSize: 20,
        sort: '',
        uavId: '',
        startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    list: [],
    count: 0
})
// 报备列表
const getData = async () => {
    form.loading = true
    const { code, data } = await apiReportList({
        ...form.data,
        startTime: Number(dayjs(form.data.startTime).format('X')),
        endTime: Number(dayjs(form.data.endTime).format('X')),
    })
    form.loading = false
    if (code != 200) return;
    form.list = data.list
    form.count = data.total
}
onMounted(() => {
    getData()
})
// const toWhiteList = () => {
//     router.replace('/report')
// }
</script>
<style scoped lang="less">
.log-menu-open {
    width: 160px;
    height: 60px;
    background-image: url('@/assets/images/hidden-wanzhou.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: 2px;
    border: 1px solid rgba(46, 116, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;

    .title-font {
        font-family: YouSheBiaoTiHei;
        opacity: 1;
        /** 文本1 */
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.48px;
        line-height: 24px;
        vertical-align: middle;
        background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.log-menu {
    width: 600px;
    height: 428px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    color: #fff;
    border-radius: 5px;

    .title {
        width: 100%;
        height: 59px;
        background-image: url('@/assets/images/index-menue-title.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .sum {
            font-size: 16px;
            font-weight: 600;
            margin-left: 10px;
        }

        .title-font {
            margin-left: 10px;
            font-family: YouSheBiaoTiHei;
            opacity: 1;
            /** 文本1 */
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 0.48px;
            line-height: 24px;
            vertical-align: middle;
            background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }



        .delete {
            width: 35px;
            cursor: pointer;
            font-weight: 600;
            color: rgba(75, 127, 239, 1);
        }
    }

    .log-table {
        background: rgba(15, 19, 41, 0.85);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

        .log-table-title {
            border: 1px solid rgba(46, 116, 255, 0.8);
            border-radius: 2px;
            display: flex;
            justify-content: space-between;
            padding: 5px;

            .uav-num {
                width: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
            }

            .name {
                width: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
            }

            .tel {
                width: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .info {
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 11px;
            }

            .location {
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 11px;
            }

            .content {
                flex: 1;
                display: flex;
                font-size: 12px;
                align-items: center;
                justify-content: center;
            }
        }

        .info-list-scroll {
            flex: 1;
            overflow: auto;
            border: 1px solid rgba(46, 116, 255, 0.8);

            li {
                flex: 1;
                overflow: auto;
                display: flex;
                justify-content: space-between;
                padding: 11.5px 4px 6px 1.5px;
                font-size: 12px;

                .uav-num {
                    width: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                }

                .name {
                    width: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                }

                .tel {
                    width: 88px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .info {
                    width: 120px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                }

                .location {
                    width: 120px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                }

                .content {
                    flex: 1;
                    display: flex;
                    font-size: 12px;
                    align-items: center;
                    justify-content: center;
                }

                .text-ellipsis {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
.pagination{
    display: flex;
    justify-content: flex-end;
    padding: 2px;
    :deep(.arco-pagination-jumper){
        .arco-input-wrapper{
            background: rgba(36, 41, 68, 1);
            color: #ffffff;
        }
        .arco-pagination-jumper-separator{
            color: #ffffff;
        }
        .arco-pagination-jumper-total-page{
            color: #ffffff;
        }

    }
}
</style>